<template>
	<view class="container">
		<!-- 空白页 -->
		<view v-if="!hasLogin" class="empty">
			<image src="/static/cart/emptyCart.jpg" mode="aspectFit"></image>
				没有登录
			<navigator url="/pages/user/login/login" hover-class="other-navigator-hover">
				去登陆
			</navigator>
		</view>
		<view v-else-if="empty" class="empty">
			<image src="/static/cart/emptyCart.jpg" mode="aspectFit"></image>
				空空如也 
			<navigator url="/pages/index/index" open-type="switchTab" hover-class="other-navigator-hover">
				随便逛逛
			</navigator>
		</view>
		<view v-else>
			<!-- 列表 -->
			<view class="cart-list">
				<!-- 按组使用 -->
				<uni-swipe-action>
					<block v-for="(item, index) in cartList" :key="item.id">
						<uni-swipe-action-item :right-options="options"  @click="swipeClick($event, index)">
							<view class="cart-item b-b">
								<!--选择框-->
								<image class="checkbox" :src="item.checked ?'/static/cart/selected.png':'/static/cart/select.png'" mode="aspectFit" @click="check(index)"></image>
								<!--商品图片-->
								<view class="image-wrapper" @click="navToDetailPage(item)">
									<image :src="item.pic"  mode="aspectFill"  ></image>
								</view>
								<!--商品介绍-->
								<view class="item-right">
									<text class="title clamp">{{item.title}}</text>
									<text class="attr">{{item.spData}}</text>
									<text class="price">¥{{item.price}}</text>
									<uni-number-box class="step" :min="1" :max="100" :value="item.number" :index="index" @blur="numberBlur" @focus="numberFocus" @change="numberChange"></uni-number-box>
								</view>
							</view>
						</uni-swipe-action-item>
					</block>
				</uni-swipe-action>
			</view>
			
			<!-- 底部菜单栏 -->
			<view class="action-section">
				<view class="checkbox">
					<image :src="allChecked?'/static/cart/selected.png':'/static/cart/select.png'" mode="aspectFit" @click="checkAll()"></image>
					<view class="clear-btn" :class="{show: allChecked}" @click="clearCart">
						清空
					</view>
				</view>
				<view class="total-box">
					<text class="price">¥{{total}}元</text>
				</view>
				<button type="primary" class="no-border confirm-btn" @click="createOrder">去结算</button>
			</view>
		
		</view>
	</view>
</template>

<script src = "./cart.js"></script>

<style lang="scss" src = "./cart.scss"></style>